<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>普通验证码+验证</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>换一换</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <style type="text/css">
		body {
			padding: 0;
			margin: 0;
		}
		ul {
			padding: 0;
			margin: 0;
		}
		.box {
			width: 600px;
			height: auto;
			margin: 0 auto;
		}
		.box>div {
			margin-top: 15px;
			font-size: 18px
		}
		.box .code-box .code {
			font-size: 22px;
			color: #f00;
		}
		.box .code-box .huan {
			font-size: 18px;
			cursor: pointer;
		}
		.box .input input {
			width: 200px;
			height: 28px;
		}
		.button {
			text-align: center;
			width: 80px;
			height: 30px;
			background: #FF3333;
			line-height: 30px;
			color: #fff;
			cursor: pointer;
			border-radius: 5px
		}
		.change{
			color: #f00;
			font-size: 16px;
		}
    </style>
</head>
<body>
    <div class="box">
        <div class="code-box">
            <span>验证码</span>
            <span class="code"></span>
            <span class="huan">换一张</span>
        </div>
        <div class="input">
            <span>输入验证码</span>
            <input type="text" id="code" placeholder="输入验证码">
            <span class="change"></span>
        </div>
        <div class="button">提交</div>
    </div>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <script type="text/javascript">
    	$(function(){
    		$(".button").on("click",verifyCode);
    		$(".huan").on("click",creatCode);
    		creatCode();
    	});
    	// 产生验证码
    	function	 creatCode(){
    		var codeC="";
    		var arr=new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z');
    		var num=6;//验证码中的字母个数
    		for( var i=0;i<num;i++)
    		{
    			var charindex=Math.floor(Math.random()*arr.length);
    			codeC+=arr[charindex];//codeC将每一个随机产生的字符都存起来
    		}
    		$(".code").html(codeC);
    	}
    	// 判断验证码是否正确
    	function verifyCode(){
    		var codeS=$(".code").html().toLowerCase();
    		var codeT=$("#code").val().toLowerCase();
    		if(codeT.length<=0)
    		{
    			$(".change").show().html("请输入验证码");
    		}
    		else if(codeS!=codeT&&codeT.length>0)
    		{
    			$(".change").show().html("验证码不正确");
    		}
    		else{
    			$(".change").html("验证码正确");
    		}
    		// 完善，焦点在输入框时，做的清除动作
    		$("#code").focus(function(){
    			$(".change").html("");
    			$(this).val("");
    		});
    	}
    </script>
</body>
</html>